export default {
    type: 'bar',
    data: [
        {
            id: 'barData',
            values: [
                {
                    name: '问天实验舱',
                    value: 3080,
                    type: 'top1'
                },
                {
                    name: '梦天实验舱',
                    value: 2880,
                    type: 'top2'
                },
                {
                    name: '天河核心舱',
                    value: 880,
                    type: 'top3'
                },
                {
                    name: '神舟飞船',
                    value: 780,
                    type: 'common'
                },
                {
                    name: '天舟飞船',
                    value: 680,
                    type: 'common'
                }
            ]
        }
    ],
    direction: 'horizontal',
    xField: 'value',
    yField: 'name',
    seriesField: 'name',
    padding: { right: 50, left: 10 },
    axes: [
        {
            orient: 'bottom',
            visible: false,
            nice: false
        },
        {
            orient: 'left',
            maxWidth: 125,
            domainLine: {
                visible: false
            },
            tick: {
                visible: false
            }
        }
    ],
    stackCornerRadius: 0,
    bar: {
        style: {
            cornerRadius: [5, 5, 5, 5],
            height: 10
        }
    },
    barBackground: {
        visible: true,
        style: {
            cornerRadius: [5, 5, 5, 5],
            height: 10
        },
        state: {
            hover: {
                stroke: '#D9D9D9',
                lineWidth: 1
            }
        }
    },
    extensionMark: [
        {
            type: 'text',
            dataId: 'barData',
            visible: true,
            style: {
                text: datum => datum.value,
                fontSize: 12,
                x: (datum, ctx) => {
                    return ctx.getRegion().getLayoutRect().width + 10;
                },
                y: (datum, ctx) => {
                    return ctx.valueToY([datum.province]) + ctx.yBandwidth() / 2;
                },
                textBaseline: 'middle',
                textAlign: 'left',
                fill: '#595959',
                size: 20
            }
        }
    ],
    crosshair: {
        yField: {
            visible: false
        }
    },
    tooltip: {
        mark: {
            title: {
                visible: false
            }
        },
        dimension: {
            title: {
                visible: false
            }
        },
        style: {
            shape: {
                shapeType: 'circle'
            }
        }
    }
};